<template>
  <div
    class="video"
    :style="{
      display: 'flex',
      flexDirection: isSelf ? 'row-reverse' : 'row'
    }"
    @tap="play"
  >
    <div
      class="img"
      :class="{ playing: playing }"
      :style="{
        transform: 'rotate(' + (isSelf ? '180deg' : '0deg') + ')'
      }"
    ></div>
    <!--    <div v-if="!playing">{{ parseTime(msg.duration, '{i}:{s}') }}</div>
    <div v-else>{{ parseTime(time, '{i}:{s}') }}</div> -->
    <div v-if="!playing">
      <template v-if="typeOf(duration) === 'number'">
        {{ Math.round(duration / 1000) }}''
      </template>
    </div>
    <div v-else>{{ Math.round(time / 1000) }}''</div>
  </div>
</template>

<script lang="ts" setup>
import { parseTime, typeOf } from '@/utils/tools'
import { ref, watch, computed, onMounted, onUnmounted } from '../../../utils/transformVue'
import store from '@/store'
import { throttle } from '@/utils/tools'
import bus from '@/utils/bus'

const props = defineProps({
  msg: {
    type: Object, // Assuming IMMessage is a custom object type
    required: true
  },
  isSelf: {
    type: Boolean
  }
})
const playing = ref(false)
const time = ref(0)
let t = null

const duration = computed(() => {
  const r = props.msg.attachment.duration
  // const r = JSON.parse(props.msg.attachment.raw)
  // const d = r.name.match(/durationTime=([0-9]+)/)[1]
  return r
})

watch(
  () => store.state.im.video,
  (newVal, oldVal) => {
    if (newVal !== props.msg.attachment.url) {
      if (t) {
        clearInterval(t)
        t = null
      }
      playing.value = false
      time.value = 0
    }
  }
)

// watch(
//   () => store.state.im.video,
//   (newVal, oldVal) => {
//     if (t) {
//       clearInterval(t)
//       t = null
//       playing.value = false
//       time.value = 0
//     }

//     if (newVal.id === props.msg.attach.url) {
//       playing.value = true
//       time.value = 0

//       t = setInterval(() => {
//         if (
//           Math.round(time.value / 1000) >=
//           Math.round(JSON.parse(props.msg.ext).duration / 1000) - 1
//         ) {
//           clearInterval(t)
//           t = null
//           playing.value = false
//           time.value = 0
//           console.log(store)
//           store.commit('im/VIDEO_STOP')
//         } else {
//           time.value = time.value + 1000
//         }
//       }, 1000)
//     }
//   },
//   { deep: true }
// )

// onMounted(() => {
//   bus.on('im_audio_stop', (id) => {
//     if (id === props.msg.attach.url) {
//       if (t) {
//         clearInterval(t)
//         t = null
//       }
//       playing.value = false
//       time.value = 0
//       store.commit('im/VIDEO_STOP')
//     }
//   })
// })

// onUnmounted(() => {
//   bus.off('im_audio_stop')
// })

const play = throttle(() => {
  //   console.log('play')
  if (!playing.value) {
    store.commit('im/VIDEO_PALY', props.msg.attachment.url)
    playing.value = true
    t = setInterval(() => {
      if (Math.round(time.value / 1000) >= Math.round(duration / 1000) - 1) {
        clearInterval(t)
        t = null
        playing.value = false
        time.value = 0
        // console.log(store)
        // store.commit('im/VIDEO_STOP')
      } else {
        time.value = time.value + 1000
      }
    }, 1000)
  } else {
    store.commit('im/VIDEO_STOP')
    if (t) {
      clearInterval(t)
      t = null
    }
    playing.value = false
    time.value = 0
    // if (t) {
    //   clearInterval(t)
    //   t = null
    // playing.value = false
    //   time.value = 0
    // }
  }
}, 200)
</script>

<style lang="scss" scoped>
.video {
  display: flex;
  cursor: pointer;
  font-size: 16px;
}
.img {
  height: 28px;
  width: 28px;
  background: url('@/static/icons/icon-yuyin3.png') 0 0 no-repeat;
  background-size: 100%;
}
.playing {
  animation: tools 0.8s 0.1s infinite ease-in-out;
}
@keyframes tools {
  0% {
    background: url('@/static/icons/icon-yuyin1.png') 0 0 no-repeat;
    background-size: 100%;
  }
  50% {
    background: url('@/static/icons/icon-yuyin2.png') 0 0 no-repeat;
    background-size: 100%;
  }
  100% {
    background: url('@/static/icons/icon-yuyin3.png') 0 0 no-repeat;
    background-size: 100%;
  }
}
</style>
